<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="影院放映监控">
                <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button>
            </common-toolbar>
            <div>
                <formData ref="componentChild" :list="list" :conmonDisabled="conmonDisabled" @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div>
            <layout layout="center"  class="centerSection noScrollSection">
               <el-table
                       :data="data"
                       v-loading.iTable="loading"
                       :stripe="true"
                       ref="mutipleTable"
                       :height="height"
                       :highlight-current-row="true"
                       border
                       :tree-props="{children: 'children'}"
                       row-key="id"
                       header-row-class-name="tableHeader"
                       tooltip-effect="dark"
                       class="watchTable"
                       style="width: 100%">
                   <el-table-column
                           label="No."
                           type="index"
                           :index="indexMethod"
                           width="50">
                   </el-table-column>
                   <el-table-column
                           property="cinemaName"
                           label="影院名称"
                           width="280"
                    >
                   </el-table-column>
                   <el-table-column
                           property="tmsHallName"
                           label="影厅"
                           width="200">
                   </el-table-column>
                   <el-table-column
                           property="state"
                           label="当前状态"
                           width="200">
                   </el-table-column>
                   <el-table-column
                           property="content"
                           label="放映内容与进度(由于网络原因存在5分钟左右延迟)">
                       <template slot-scope="scope">
                           <div style="text-align: left;line-height: 30px;height: 30px;" v-if="scope.row.cplName">
                                {{scope.row.cplName}}
                           </div>
                           <div  style="text-align: left;line-height: 30px;height: 30px;" v-else>
                               -------
                           </div>
                           <div style="line-height: 30px;height: 30px;">
                               <div style="display:inline-block;width:50%;text-align:left">本片已播时长:{{getPlayedTime(scope.row.playedDuration)}}</div>
                               <div style="display:inline-block;width:50%;text-align:right" >本片剩余时长:{{totalDuration(scope.row)}}</div>
                           </div>
                           <div style="line-height: 30px;height: 30px;">
                               <el-progress :text-inside="true" :stroke-width="18" :percentage="gteProgress(scope.row)"></el-progress>
                           </div>
                       </template>
                   </el-table-column>
               </el-table>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div>
               
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="放映状态">
                        <el-select size="small" v-model="form.status" placeholder="请选择">
                            <el-option
                                    key="放映中"
                                    label="放映中"
                                    value="放映中">
                            </el-option>
                            <el-option
                                    key="空闲中"
                                    label="空闲中"
                                    value="空闲中">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
	import Vue from 'vue';
    import Component from 'vue-class-component';
    import Service from './showStatusWatch.service';
    import {JSEncrypt} from 'jsencrypt';
    import base from '@/scrollLoad';
    import moment from 'moment';
     import formData from '@/views/form/form.vue';
    @Component({components:{
        formData
    }})
    export default class showStatusWatch extends Vue{
        height = 500;
        windowHeight = 700;
        loading = false;
        data = [];
        onlyShowError = false;
        total = 0;
        page = 1;
        pageSize = 30;
        cinemaName = '';
        cinemaCode = '';
        conmonDisabled:boolean=false;
        dialogVisible = false;
        list='';
        form = {
            name: '',
            code: '',
            status : ''
        };
        status:''
        constructor(){
            super();
            
        };
         // 序号
        indexMethod(index) {
        return (this.page - 1) * this.pageSize + index + 1;
        }
        searchErrorList(){
            this.onlyShowError = true;
            this.searchList();
        }
        
        searchAllList(){
            this.onlyShowError = false;
            this.searchList();
        }
        getPlayedTime(row) {
            if(row!=undefined) {
                let result = parseInt(row)
                console.log(Math.floor((result / 60 % 60)))
                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
                let res = '';
                if(h !== '00') res += `${h}时`;
                if(m !== '00') res += `${m}分`;
                res += `${s}秒`;
                return res
            } else {
                return '0:0:0'
            }
        }
        gteProgress(row){
            if(row.totalDuration==undefined&&row.playedDuration==undefined ||row.playedDuration=='0') {
                 //console.log(row,'服务进度haha',row,'服务天数');
                return 0
            }
            // if(row.playedDuration=='0') {
            //     return 0
            // }
            // let result = parseInt(time)
            //  if(result<100&&result>0) {
            //     return Math.abs((parseInt(10)-(Math.round(result) /row.playedDuration / row.totalDuration ))).toFixed(2)
            // } 
            // if(result == 0) {
            //     return 100)
            // }
            return ((parseInt(row.playedDuration) / parseInt(row.totalDuration ))*100).toFixed(2)
            let time  = ((parseInt(row.totalDuration) - parseInt(row.playedDuration))/100.00);
            // console.log(time,Math.abs(100-time))
            if(time == 0) {
                return 100
            }
            return Math.abs(100-time).toFixed(2)
        }
        totalDuration(row) {
            //console.log(row)
            if(row.totalDuration!=undefined&&row.playedDuration!=undefined) {
                let time  = row.totalDuration - row.playedDuration;
                let result = parseInt(time)
                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
                let res = '';
                if(h !== '00') res += `${h}时`;
                if(m !== '00') res += `${m}分`;
                res += `${s}秒`;
                return res
            } else {
                return '0:0:0'
            }
        }
        searchList(){
            let params = {
                pageNum: this.page,
                pageSize: this.pageSize,
                state: this.status,
                cinemaName: this.cinemaName,
                cinemaCode: this.cinemaCode,
            }
            //console.log(params)

            this.data = [];
            let list = [];
            Service.showState(params).then(res=>{
                if(res.data.succeeded){
                    this.data = res.data.data;
                    this.total = res.data.totalRecords;
                    this.loading=false;
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                    this.loading=false;
                }
            })
            // for(let i=0;i<30;i++){
            //     list.push({
            //         id: i,
            //         name : '影厅名称' + i,
            //         cinemaName : (i+1)+'号厅' ,
            //         finishTime: '01:00:54',
            //         remainTime: '00:11:45',
            //         movie: 'ShengXiaWeiLai-2D_185_JP_115M_PTH_51_0721',
            //         status: '放映中',
            //     });
            // // }

            // this.data = list;
            
            // this.total = this.data.length;
        }

        handleSizeChange(val) {
            this.pageSize = val;
            this.searchList();
        }

        handleCurrentChange(val) {
            this.page = val;
            this.searchList();
        }

        showDetail(){
        
        }

        dateFormat(date){
            return moment(date).format("YYYY-MM-DD,H:m:s");
        }

        resizeEvent(){
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
        }
        getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            this.list='status'
            this.conmonDisabled = true;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210 - 95;
        }
        condition(data) {
            //console.log(data)
            this.page = 1
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.status = data.user8
            this.searchList()

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
        conmonDisabledNone(conmonDisabled) {
            
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.status = conmonDisabled.user8
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
            this.searchList();
        }
        created(){
            const me = this;
            this.resizeEvent();
            this.searchList();
            window.onresize = () => {
                return (() => {
                    me.resizeEvent();
                })()
            };
        };
        mounted(){   
                  
        };
        
    }
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
   
</style>